<template>
  <div class="bg-gradient-to-b from-sky-50 to-white rounded-lg shadow-lg p-6 overflow-hidden relative">
    <!-- 背景装饰：增强炫酷感且不干扰内容 -->
    <div class="absolute top-0 left-0 w-72 h-72 bg-indigo-100 rounded-full filter blur-3xl opacity-20 -translate-x-1/3 -translate-y-1/3"></div>
    <div class="absolute bottom-0 right-0 w-80 h-80 bg-sky-100 rounded-full filter blur-3xl opacity-20 translate-x-1/3 translate-y-1/3"></div>

    <!-- 标题区：强化视觉焦点，呼应顶部风格 -->
    <h2 class="text-xl font-semibold text-gray-800 mb-8 relative z-10 flex items-center">
      <span class="w-1.5 h-7 bg-gradient-to-b from-sky-500 to-indigo-600 rounded-full mr-3"></span>
      系统消息
      <span class="ml-2 text-sm font-normal text-gray-500 bg-sky-100 px-2 py-0.5 rounded-full">
        {{ systemNotices.length + securityAlerts.length }} 条消息
      </span>
    </h2>

    <!-- 系统公告区域：橙色系标识，保持正式警示感 -->
    <div class="mb-10 relative z-10">
      <h3 class="text-lg font-medium text-gray-800 mb-4 flex items-center">
        <div class="w-8 h-8 rounded-full bg-gradient-to-br from-orange-100 to-orange-200 flex items-center justify-center text-orange-600 mr-2">
          <font-awesome-icon icon="bullhorn" />
        </div>
        系统公告
        <span class="ml-2 text-xs text-orange-600 bg-orange-50 px-1.5 py-0.5 rounded">
          {{ systemNotices.length }} 条
        </span>
      </h3>

      <div class="space-y-4">
        <div
            v-for="(notice, index) in systemNotices"
            :key="index"
            class="bg-white/90 backdrop-blur-sm rounded-lg border border-orange-100 p-5 hover:shadow-md transition-all duration-300 hover:border-orange-200 hover:-translate-y-0.5 group"
        >
          <div class="flex items-start justify-between mb-2">
            <h4 class="font-medium text-gray-800 group-hover:text-orange-700 transition-colors">
              <font-awesome-icon icon="circle" class="text-xs text-orange-500 mr-2" />
              {{ notice.title }}
            </h4>
            <span class="text-sm text-gray-500 whitespace-nowrap">
              {{ notice.time }}
            </span>
          </div>
          <p class="text-gray-600 text-sm pl-5 leading-relaxed">
            {{ notice.content }}
          </p>
        </div>
      </div>
    </div>

    <!-- 账户安全提醒区域：蓝色系标识，凸显专业安全感 -->
    <div class="relative z-10">
      <h3 class="text-lg font-medium text-gray-800 mb-4 flex items-center">
        <div class="w-8 h-8 rounded-full bg-gradient-to-br from-sky-100 to-sky-200 flex items-center justify-center text-sky-600 mr-2">
          <font-awesome-icon icon="shield-alt" />
        </div>
        账户安全提醒
        <span class="ml-2 text-xs text-sky-600 bg-sky-50 px-1.5 py-0.5 rounded">
          {{ securityAlerts.length }} 条
        </span>
      </h3>

      <div class="space-y-4">
        <div
            v-for="(alert, index) in securityAlerts"
            :key="index"
            class="bg-white/90 backdrop-blur-sm rounded-lg border border-sky-100 p-5 hover:shadow-md transition-all duration-300 hover:border-sky-200 hover:-translate-y-0.5 group"
        >
          <div class="flex items-start justify-between mb-2">
            <h4 class="font-medium text-gray-800 group-hover:text-sky-700 transition-colors">
              <font-awesome-icon icon="circle" class="text-xs text-sky-500 mr-2" />
              {{ alert.title }}
            </h4>
            <span class="text-sm text-gray-500 whitespace-nowrap">
              {{ alert.time }}
            </span>
          </div>
          <p class="text-gray-600 text-sm pl-5 leading-relaxed">
            {{ alert.content }}
          </p>
          <!-- 安全提醒专属：悬停显示"查看详情"按钮，增强交互 -->
          <div class="mt-3 pl-5 opacity-0 group-hover:opacity-100 transition-opacity">
            <button class="text-xs text-sky-600 hover:text-sky-800">
              <font-awesome-icon icon="angle-right" class="mr-1" /> 查看详情
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      systemNotices: [
        {
          title: '系统升级通知',
          content: '系统将于10月25日23:00-次日02:00进行升级维护，期间可能无法正常访问，敬请谅解。',
          time: '2023-10-18 10:00'
        },
        {
          title: '新增合同模板通知',
          content: '系统已新增"房屋租赁合同"和"软件开发合同"两类模板，欢迎使用并提出宝贵意见。',
          time: '2023-10-10 08:30'
        }
      ],
      securityAlerts: [
        {
          title: '登录提醒',
          content: '您的账户于10月18日09:15在新设备（Windows 10）上登录，如非本人操作，请及时修改密码。',
          time: '2023-10-18 09:16'
        },
        {
          title: '密码即将过期',
          content: '您的密码已使用90天，为保证账户安全，建议在15天内修改密码。',
          time: '2023-10-15 16:45'
        }
      ]
    }
  }
}
</script>